import { View, Text, Image, Button as TaroButton, Input, Checkbox } from "@tarojs/components";
import { Button, Dialog } from "@taroify/core";
import Taro from "@tarojs/taro";
import { useUserStore } from "@/stores";
import "./index.scss";
import { register } from "@/services";
import { useState } from "react";

export default function Index() {
  const defaultAvatar = "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
  const userStore = useUserStore();
  const [avatar, setAvatar] = useState<string>(defaultAvatar);
  const [nickname, setNickname] = useState<string>("");
  const [loading, setLoading] = useState(false);
  const [showDialog, setShowDialog] = useState(false);
  const [agree, setAgree] = useState(false);

  // 选择头像
  const onChooseAvatar = (e) => {
    setAvatar(e.detail.avatarUrl || defaultAvatar);
  };

  // 注册
  const handleRegister = async () => {
    if (!avatar || !nickname) {
      Taro.showToast({ title: "请完善头像和昵称", icon: "none" });
      return;
    }
    // if (!agree) {
    //   setShowDialog(true);
    //   return;
    // }
    setLoading(true);
    try {
      await register({ avatar, nickname });
      userStore.setUser({ ...userStore.user, avatar, name: nickname });
      Taro.showToast({ title: "注册成功", icon: "success" });
      setTimeout(() => {
        Taro.navigateBack({
          delta: 2,
        });
      }, 1000);
    } catch (err) {
      Taro.showToast({ title: "注册失败", icon: "none" });
    }
    setLoading(false);
  };

  return (
    <View className="my-page">
      <View className="top" style={{ flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "60px 0" }}>
        {/* <TaroButton
          className="avatar-wrapper"
          openType="chooseAvatar"
          onChooseAvatar={onChooseAvatar}
          style={{ background: "none", border: "none", padding: 0 }}
        >
          <Image
            className="avatar"
            src={avatar}
            mode="aspectFill"
            style="width: 120px; height: 120px; border-radius: 50%; border: 2px solid #eee;"
          />
        </TaroButton> */}
        <Input
          className="weui-input"
          type="nickname"
          placeholder="请输入昵称"
          value={nickname}
          onInput={e => setNickname(e.detail.value)}
          style={{ marginTop: "20px", fontSize: "18px", color: "#333", width: "60%", textAlign: "center" }}
        />
      </View>
      <View className="container" style={{ marginTop: "30px", textAlign: "center" }}>
        <Button
          className="save-button"
          loading={loading}
          onClick={handleRegister}
          style={{ width: "80%", margin: "0 auto", background: "#07c160", color: "#fff" }}
        >
          注册
        </Button>
        {/* <View style={{ marginTop: "20px", color: "#999", fontSize: "14px" }}>
          <Checkbox value="" checked={agree}>我已阅读并同意</Checkbox>
          <Text style={{ color: "#07c160" }} onClick={() => setShowDialog(true)}>《用户协议》和《隐私政策》</Text>
        </View> */}
      </View>
      <Dialog open={showDialog} onClose={() => setShowDialog(false)}>
        <Dialog.Header>用户协议与隐私政策</Dialog.Header>
        <Dialog.Content>
          <View style={{ maxHeight: "300px", overflow: "auto", textAlign: "left" }}>
            这里填写你的用户协议和隐私政策内容……
          </View>
        </Dialog.Content>
        <Dialog.Actions>
          <Button onClick={() => { setAgree(true); setShowDialog(false); }}>同意</Button>
          <Button variant="outlined" color="danger" onClick={() => setShowDialog(false)}>不同意</Button>
        </Dialog.Actions>
      </Dialog>
    </View>
  );
}